// JavaScript Document
function initGradients(s) {
	$(function(){
		$(s).each(function() {
			var el = this;
			var from = $(el).attr('gradFromColor')||'#fcf894', to = $(el).attr('gradToColor')||'#000000';
			var fR = parseInt(from.substring(1, 3), 16),
			fG = parseInt(from.substring(3, 5), 16),
			fB = parseInt(from.substring(5, 7), 16),
			tR = parseInt(to.substring(1, 3), 16),
			tG = parseInt(to.substring(3, 5), 16),
			tB = parseInt(to.substring(5, 7), 16);
	
			var h = $(this).height() * 1.5;
			var html,cacheHTML=[];
			this.initHTML = html = this.initHTML||this.innerHTML;
			this.innerHTML = '';
			for (var i = 0; i < h; i++) {
				var c = '#' + (Math.floor(fR * (h - i) / h + tR * (i / h))).toString(16) + (Math.floor(fG * (h - i) / h + tG * (i / h))).toString(16) + (Math.floor(fB * (h - i) / h + tB * (i / h))).toString(16);
				cacheHTML.push('<span class="rainbow rainbow-' + i + '" style="color: ' + c + ';"><span style="top: ' + ( - i - 1) + 'px;">' + html + '</span></span>')
			}
			cacheHTML.push('<span class="highlight">' + html + '</span>','<span class="shadow">' + html + '</span>');
			$(cacheHTML.join('')).appendTo(this)
		})
	})
}
initGradients('.rainbows');
$(function(){
	var $box=$("#box").children(".box"),
		$span=$("#tab").children("span"),
		$focus=$span.filter(".focus");
		$box.eq($span.index($focus)).show().siblings(".box").hide();
	$span.click(function(){
		var $len=$span.index(this);
		$(this).addClass("focus").siblings().removeClass("focus");
		$box.eq($len).show().siblings(".box").hide();	
	})	
})